import Stage from './Stage';
import BoxGroup from './BoxGroup';
import LittleMan from './LittleMan';
import {setFrameAction} from '../util/TweenUtil';

export default class JumpGame {

  constructor () {
    this.init();
    this.addButton();
    this.addTitleElement();
    this.addStatusListenerButton();
    this.setStatusListener();
    this.addPortInput();
  }

  init() {
    // 舞台
    this.stage = null;
    // 盒子组
    this.boxGroup = null;
    // 小人
    this.littleMan = null;
    
    // 游戏初始化
    this.initStage();
  }
  
  reset() {
    if (this.stage) {
      this.stage.clearStage();

       // 初始化盒子
      this.initBoxes();
      // 初始化小人
      this.initLittleMan();
      // 每次动画后都要渲染
      setFrameAction(this.stage.render.bind(this.stage));
    }

    this.resetTitleElement();
    this.setStatusListener();
  }

  initStage() {
    // 初始化舞台
    this.stage = new Stage();
    // 初始化盒子
    this.initBoxes();
    // 初始化小人
    this.initLittleMan();
    // 每次动画后都要渲染
    setFrameAction(this.stage.render.bind(this.stage));
  }

  initBoxes() {
    this.boxGroup = new BoxGroup();

    // 初始化首个盒子
    this.boxGroup.createBox();
    // 初始化第二个盒子
    this.boxGroup.createBox();
    // 盒子加入场景
    this.boxGroup.enterStage(this.stage);
  }

  initLittleMan() {
    // 小人初始化
    this.littleMan = new LittleMan(this.stage, this.boxGroup);
    // 将小人给盒子一份，方便盒子移动的时候带上小人
    this.boxGroup.setLittleMan(this.littleMan);
    // 加入舞台
    this.littleMan.enterStage(this.stage);

    // 更新盒子和小人的位置
    this.boxGroup.updatePosition({
      duration: 0
    });
  }

  addPortInput() {
    const input = document.createElement('input');
    input.id = 'port';
    input.type = 'text';
    input.placeholder = '请输入端口号';
    input.style.position = 'fixed'; // 使用固定定位
    input.style.top = '40px'; // 距离顶部40px
    input.style.left = '10px'; 
    input.style.zIndex = '1000'; // 确保按钮在其他元素之上
    document.body.appendChild(input);
  }

  addButton() {
    const button = document.createElement('button');
    button.id = 'resetButton';
    button.textContent = '重置游戏';
    button.style.position = 'fixed'; // 使用固定定位
    button.style.top = '10px'; // 距离顶部10px
    button.style.left = '50%'; // 水平居中
    button.style.transform = 'translateX(-50%)'; // 向左偏移自身宽度的一半
    button.style.zIndex = '1000'; // 确保按钮在其他元素之上
    button.addEventListener('click', () => {
      console.log('Button clicked!');
      // 添加你的点击逻辑
      this.reset()
    });
    document.body.appendChild(button);
  }

  addStatusListenerButton() {
    const button = document.createElement('button');
    button.id ='statusListenerButton';
    button.textContent = '状态监听器';
    button.style.position = 'fixed'; // 使用固定定位
    button.style.top = '10px'; // 距离顶部10px
    button.style.left = 'calc(50% + 100px)'; // 在add按钮右边
    // button.style.transform = 'translateX(-50%)'; // 向左偏移自身宽度的一半
    button.style.zIndex = '1000'; // 确保按钮在其他元素之上
    button.addEventListener('click', () => {
      console.log('Button clicked!');
      // 添加你的点击逻辑
      this.connectToListener();
    });
    document.body.appendChild(button);
  }
  
  addTitleElement() {
    this.titleElement = document.createElement('div');
    this.titleElement.textContent = '分数：0'; // 设置文本内容
    this.titleElement.style.position = 'fixed'; // 使用固定定位
    this.titleElement.style.top = '20px'; // 与按钮对齐
    this.titleElement.style.left = 'calc(50% - 200px)'; // 假设按钮宽度约为60px，向左偏移更多
    this.titleElement.style.zIndex = '1000'; // 确保元素在其他元素之上
    this.titleElement.style.color = 'black'; // 设置文本颜色
    this.titleElement.style.fontSize = '20px'; // 设置字体大小
    this.titleElement.style.fontFamily = 'Arial, sans-serif'; // 设置字体
    document.body.appendChild(this.titleElement);
    this.resetTitleElement();
  }

  resetTitleElement() {
    // 监听 state 变化
    this.littleMan.on('scoreChange', (oldScore, newScore) => {
      console.log(`Score changed from ${oldScore} to ${newScore}`);
      // 这里可以根据状态变化执行其他操作
      this.titleElement.textContent = `分数： ${newScore}`;
    });

    this.titleElement.textContent = '分数：0';
  }

  setStatusListener(){
    this.littleMan.on('stateChange', (newStatus) => {
      console.log("current state is " + newStatus);
      // this.sendGameStatus();
    });
  }

  connectToListener() {
    if (this.socket) {
      this.socket.close();
    }

    const portInput = document.getElementById('port');
    const port = portInput.value || '8866';
    // 创建一个WebSocket对象
    this.socket = new WebSocket(`ws://127.0.0.1:${port}/status`);

    let self = this;
    // 连接建立时触发
    this.socket.onopen = function(event) {
        console.log("WebSocket连接已建立");
        self.socket.send("你好，这是一条欢迎消息，当前版本v1.1");
    };

    // 接收到服务器消息时触发
    this.socket.onmessage = function(event) {
        console.log("收到服务器消息： " + event.data);
        self.parseMessage(event.data);
    };

    // 连接关闭时触发
    this.socket.onclose = function(event) {
        console.log("WebSocket连接已关闭");
    };

    // 连接发生错误时触发
    this.socket.onerror = function(event) {
        console.log("WebSocket连接发生错误");
    };

  }

  parseMessage(message) {
    try {
      let data = JSON.parse(message);
      switch (data.type) {
        case'reset':
          console.log("执行重置动作");
          this.reset();
          this.sendGameStatus();
          break;
        case'status':
          console.log("收到获取状态动作");
          this.sendGameStatus();
          break;
        default:
          console.log("未知的消息类型：" + data.type);
          break;
      }
    } catch (error) {
      console.log(error);
    }
  }

  sendGameStatus(){
    let gameStatus = {
      "type": "status",
      "score": this.littleMan.getScore(),
      "status": this.littleMan.getStatus(),
      "done": this.littleMan.getIsDone(),
      "obs": this.littleMan.getObs()
    }

    if (this.socket) {
      this.socket.send(JSON.stringify(gameStatus));
    }

    if (this.socket2) {
      this.socket2.send(JSON.stringify(gameStatus));
    }
  }

  start() {
    this.stage.render();
  }

}
